﻿<!DOCTYPE html>

<!-- map.js: map with labels -->

<html>
<head>
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<script src="js/three.min.js"></script>
	<script src="js/OrbitControls.js"></script>
	<link rel="stylesheet" href="example.css">
</head>

<body>
	<script type="module">
	
		import {Map} from '../map.js';
		import {scene} from './example.js';


		new Map( '../map.xml', drawMap );

		var fullNames = { BG: 'България', BL: 'Благоевград', BU: 'Бургас', DO: 'Добрич', GA: 'Габрово', HA: 'Хасково', KA: 'Кърджали', KY: 'Кюстендил', LO: 'Ловеч', MO: 'Монтана', PA: 'Пазарджик', PE: 'Перник', PL: 'Пловдив', PN: 'Плевен', RA: 'Разград', RU: 'Русе', SF: 'София', SH: 'Шумен', SI: 'Силистра', SL: 'Сливен', SM: 'Смолян', SO: 'София обл.', ST: 'Ст. Загора', TA: 'Търговище', VA: 'Варна', VE: 'В. Търново', VI: 'Видин', VR: 'Враца', YA: 'Ямбол' };

		function drawMap( map )
		{
			// country name
			scene.add( map.label2D( 'BG', fullNames['BG'], 0, 'black', 2.5 ) );
			
			for( var regionName in map.regions ) if( regionName!='BG' )
			{
				var value = 0.1+3*Math.random(),
					color = new THREE.Color( 1, value/3, value/6 );
					
				scene.add(
					// province shape
					map.region3D( regionName, value, color ),
					// province name
					map.label2D( regionName, fullNames[regionName], value, 'black', 0.8 ),
					// province percentage
					map.label2D( regionName, Math.round(100*value/3.1)+'%', value, 'navy', 0.7, 1.2 )
				);
			}
		}
		 
		 
	</script>
</body>
</html>


